@*
* Copyright 2016 LinkedIn Corp.
*
* Licensed under the Apache License, Version 2.0 (the "License"); you may not
* use this file except in compliance with the License. You may obtain a copy of
* the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
* WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
* License for the specific language governing permissions and limitations under
* the License.
*@

@(jobDefPair: IdUrlPair, graphType: String, results: java.util.Map[IdUrlPair, java.util.List[models.AppResult]], maxStages: Int,
        flowExecTimeList:java.util.List[Long])

@import com.linkedin.drelephant.analysis.Severity
@import com.linkedin.drelephant.util.Utils;

@getSeverityColor(severity : Severity) = @{
  var color: String  = "#5cb85c"; // LOW or NONE

  if(severity.getText.equalsIgnoreCase("CRITICAL")) {
    color = "#d9534f"
  } else if(severity.getText.equalsIgnoreCase("SEVERE")) {
    color = "#e4804e"
  } else if(severity.getText.equalsIgnoreCase("MODERATE")) {
    color = "#f0ad4e"
  }

  color
}

@if(results != null && results.nonEmpty) {
  @tags.panel(){ Job History Results: <a href="@jobDefPair.getUrl" style="font-size:14px; color:#083d8d">@jobDefPair.getId</a>} {
    @if(graphType.equals("resources")) {
      <script src="@routes.Assets.at("js/jobresourcesmetricshistoryform.js")" type="text/javascript"></script>
      <script src="@routes.Assets.at("js/graphresourcesmetricsutility.js")" type="text/javascript"></script>
      <script src="@routes.Assets.at("js/resourcegraphtooltiputility.js")" type="text/javascript"></script>
    } else  {
      <script src="@routes.Assets.at("js/jobtimehistoryform.js")" type="text/javascript"></script>
      <script src="@routes.Assets.at("js/graphtimemetricsutility.js")" type="text/javascript"></script>
      <script src="@routes.Assets.at("js/timegraphtooltiputility.js")" type="text/javascript"></script>
    }

    <div>
        <!-- Performance Score Graph -->
      <div style='width:1078px; height:342px'>
        <img src='@routes.Assets.at("images/loading.gif")' id='loading-indicator' alt='Loading...'
        style='position:relative;left:50%;top:40%;display:none;'/>
        <svg id="visualisation" width="100%" height="100%" style="overflow:visible"></svg>
      </div>

      <hr>

        <!-- The tabular results -->
      <div class="table-responsive">
        <table class="table table-striped table-bordered table-hover">

          <thead>
            <tr>
              <th style="min-width:200px">Job Executions</th>

              @for(i <- 1 to maxStages) {
                <th style="min-width : 380px ;padding:0px;">Stage @i
                  <table style="padding:0px; margin: 0px; height:100%; width:100%">
                    <tr><td>
                      <!-- div containing the header table -->
                      <div style="height:100%; width:100%;  display: block">

                        <table class="table" style="height:100%; width:100%; display: table; border-collapse: collapse; margin:0px; padding:0px">

                          <tbody style="height:100%;">
                            <tr style="text-align: center;">
                            <td class="used-resource-td hasTooltip" style="width: 95px"><img src='@routes.Assets.at("images/usedmemory.png")' class="metrics-icons-table" alt='used resources'/>
                              <div id="tooltip-div">
                                <span> The resources used by the stage in GB Hours</span>
                              </div>
                            </td>
                            <td class="wasted-resource-td hasTooltip" style="width: 95px"><img src='@routes.Assets.at("images/wastedmemory.png")' class="metrics-icons-table" alt='wasted resources'/>
                              <div id="tooltip-div">
                                <span> The total resources wasted by the stage in GB Hours</span>
                              </div>
                            </td>
                            <td class="run-time-td hasTooltip" style="width: 95px"><img src='@routes.Assets.at("images/runtime.png")' class="metrics-icons-table" alt='total runtime'/>
                              <div id="tooltip-div">
                                <span> The total running time of the stage in HH:MM:SS</span>
                              </div>
                            </td>
                            <td class="wait-time-td hasTooltip" style="width: 95px"><img src='@routes.Assets.at("images/waittime.png")' class="metrics-icons-table" alt='total wait time'/>
                              <div id="tooltip-div">
                                <span> The total wait time for the stage in HH:MM:SS</span>
                              </div>
                            </td>
                            </tr>
                          </tbody>
                        </table>
                      </div>
                    </td></tr>
                  </table>
                </th>
              }
            </tr>
          </thead>

          <tbody>
          @for((flowExecPair, jobs) <- results) {
            <tr>

                <!-- The First column, execution time -->
              <td style="text-align:center">
                <a class="exectime" href='@flowExecPair.getUrl' data-toggle='tooltip' title='@flowExecPair.getUrl'>Loading...</a>
              </td>

                <!-- The remaining columns -->
              @for(i <- 1 to maxStages) {
                <td style="height: 35px; padding:0; margin:0">
                  @if(i <= jobs.length) {
                    <div style="height:100%; width:100%;  display: block">

                      <table class="table" style="height:100%; width:100%; display: table; border-collapse: collapse; margin:0px; padding:0px">

                        <tbody style="height:100%;">
                          <tr style="text-align: center;">
                            <td class="used-resource-td hasTooltip" style="width: 95px">@(Utils.getResourceInGBHours(jobs(i-1).resourceUsed).split("GB")(0))
                            </td>
                            <td class="wasted-resource-td hasTooltip" style="width: 95px">@(Utils.getResourceInGBHours(jobs(i-1).resourceWasted).split("GB")(0))
                            </td>
                            <td class="run-time-td hasTooltip" style="width: 95px">@(Utils.getDurationBreakdown(jobs(i-1).finishTime-jobs(i-1).startTime).split("Hours")(0))
                            </td>
                            <td class="wait-time-td hasTooltip" style="width: 95px">@(Utils.getDurationBreakdown(jobs(i-1).totalDelay).split("Hours")(0))
                            </td>
                          </tr>
                        </tbody>
                      </table>
                    </div>
                  }
                </td>
              }

            </tr>
          }
          </tbody>

        </table>
      </div>
    </div>
  }
}